import React, { Component } from "react";
import { Form, Input, Select, Button, InputNumber, Row, Col } from "antd";
const Item = Form.Item;
const Option = Select.Option;
export default class FormItem extends Component {
  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  // input
  inputElement = (item) => {
    const { dataSource } = this.props;
    return (
      <Col span={8} key={item.label}>
        <Item
          label={item.label}
          name={item.name}
          key={item.label}
          rules={item.rules || []}
          {...this.props.formLayout}
          initialValue={dataSource[0]?.name || ""}
        >
          <Input
            placeholder={item.placeholder + item.label}
            onChange={this.handleChange}
          />
        </Item>
      </Col>
    );
  };
  // select
  selectElement = (item) => {
    const { dataSource } = this.props;
    return (
      <Col span={8} key={item.label}>
        <Item
          label={item.label}
          name={item.name}
          key={item.label}
          rules={item.rules || []}
          {...this.props.formLayout}
          initialValue={dataSource[0]?.country || undefined}
        >
          <Select placeholder={item.placeholder + item.label}>
            {item.options &&
              item.options.map((cItem) => {
                return (
                  <Option value={cItem.value} key={cItem.id}>
                    {cItem.countryName}
                  </Option>
                );
              })}
          </Select>
        </Item>
      </Col>
    );
  };
  // inputNumberElement
  inputNumberElement = (item) => {
    const { dataSource } = this.props;
    return (
      <Col key={item.label} span={8}>
        <Item
          label={item.label}
          name={item.name}
          key={item.label}
          rules={item.rules || []}
          {...this.props.formLayout}
          initialValue={dataSource[0]?.number || ""}
        >
          <InputNumber
            placeholder={item.placeholder + item.label}
            style={item.style}
          />
        </Item>
      </Col>
    );
  };

  // 初始化表单
  initFormItem = () => {
    let formList = [];
    const { formItem } = this.props;
    if (!formItem || formItem.length === 0) return;
    formItem.map((item) => {
      switch (item.type) {
        case "input":
          formList.push(this.inputElement(item));
          break;
        case "select":
          formList.push(this.selectElement(item));
          break;
        case "inputNumber":
          formList.push(this.inputNumberElement(item));
          break;
      }
      return null;
    });
    return formList;
  };
  // 提交表单

  render() {
    return (
      <section style={{width:'100%',background:'pink',display:'flex',justifyContent:'space-around'}}>
        <Form onFinish={this.props.onFinish} layout="vertical" >
          <Row>{this.initFormItem()}</Row>
          <Row>
            <Col
              span={24}
              style={{ display: "flex", justifyContent: "center" }}
            >
              <Item>
                <Button type="primary" htmlType="submit">
                  提交表单
                </Button>
                <Button onClick={this.props.cancelSubmit}>取消提交</Button>
              </Item>
            </Col>
          </Row>
        </Form>
      </section>
    );
  }
}
